<template>
  <div>
    <div class="header">{{
        viewName == 'personal_handler_write_off_apply' || viewName == 'write_off' ? '核销申请' : '付款申请'
      }}
    </div>
    <el-form :model="cuForm" ref="cuForm" v-loading="formLoading" :rules="rules"
             :disabled="cuForm.flow_status ==3||cuForm.flow_status ==4"
    >
      <div class="title">申请人： {{ userName }}</div>
      <table class="mailTable">
        <tr class="firstTr">
          <td class="column firstTd">
            <span class="tip">*</span>收款方
          </td>
          <td class="column">
            <el-form-item prop="receiver">
              <el-input v-model="cuForm.receiver" placeholder="请输入收款方"></el-input>
            </el-form-item>
          </td>
          <td class="column">
            <span class="tip">*</span>金额
          </td>
          <td class="column">
            <el-form-item prop="amount">
              <el-input v-model.trim="cuForm.amount" placeholder="请输入金额"></el-input>
            </el-form-item>
          </td>
          <td class="column">
            款别
          </td>
          <td class="column">
            <el-input placeholder="请输入款别" v-model.trim="cuForm.type"></el-input>
            <!--            <el-upload v-if="cuForm.apply_attach_file==null" :action="upFileUrl" :show-file-list="false"-->
            <!--                       :headers="uploadHeaders"-->
            <!--                       :on-success="uploadSuccess" :before-upload="beforeUpload" :on-error="uploadError"-->
            <!--            >-->
            <!--              <el-button size="small" icon="el-icon-upload" type="primary"-->
            <!--                         :disabled="!(cuForm.apply_attach_file==null)"-->
            <!--              >-->
            <!--                请上传附件-->
            <!--              </el-button>-->
            <!--            </el-upload>-->
            <!--            <el-link v-else type="primary" @click="downLoad">查看附件</el-link>-->
          </td>
        </tr>
        <tr>
          <td class="column firstTd title" colspan="2">
            <span class="tip">*</span>收款事由
          </td>
          <td colspan="4">
            <div class="form_item">
              <el-form-item prop="reason" style="margin: 10px 0">
                <el-input clearable type="textarea" v-model.trim="cuForm.reason" :rows="4" show-word-limit
                          placeholder="请输入收款事由"
                ></el-input>
              </el-form-item>
            </div>
          </td>
        </tr>
        <tr>
          <td class="column firstTd" colspan="2">
            大写
          </td>
          <td class="column" colspan="4">
            {{ bigMoneyStr }}
          </td>
        </tr>
      </table>
      <div style="width:60%;margin: 5px auto">
        <el-upload
          :action="upFileUrl"
          :headers="uploadHeaders"
          :on-preview="handlePreview"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="cuForm.fileList"
        >
          <el-button size="small" type="primary">上传附件</el-button>
        </el-upload>
      </div>
    </el-form>
    <FlowBtnRow :form-name="'cuForm'" :is-new-data="is_created" :can-check="cuForm.can_check"
                :is-applyer="cuForm.flow_applyer_id == userId" :flow-status="cuForm.flow_status"
                @save="save" @submit="submit" @pass="pass" @returnBack="returnBack" @delete="remove"
                @actualDelete="actualDelete"
    ></FlowBtnRow>
  </div>
</template>

<script>
import { amountToBigStr } from '@/utils/amount'
import FlowBtnRow from '@/components/FlowBtnRow'
import { upFileUrl } from '@/api/others'
import { getToken } from '@/utils/auth'
import {
  actualDeleteData,
  deleteData,
  getDetail,
  pass,
  returnBack,
  save,
  saveAndBegin
} from '@/api/reimbursement/payment_apply/payment_apply'
import {
  actualDeleteData as writeOffActualDeleteData,
  deleteData as writeOffDeleteData,
  getDetail as getWriteOffDetail,
  pass as writeOffPass,
  returnBack as writeOffReturnBack,
  save as writeOffSave,
  saveAndBegin as writeOffSaveAndBegin
} from '@/api/reimbursement/write_off/write_off'

export default {
  name: 'expense_adv_charge_info',
  components: { FlowBtnRow },
  data() {
    return {
      cuForm: {
        id: null,
        reason: null,
        amount: null,
        type: null,
        apply_attach_file: null,
        fileList: []
      },
      is_write_off_page: false,
      upFileUrl,
      sheetList: [],
      uploadHeaders: {},
      is_created: false,
      viewName: null,
      rules: {
        amount: [
          { required: true, message: '请输入金额', trigger: 'blur' }
        ],
        reason: [
          { required: true, message: '请输入事由', trigger: 'blur' }
        ],
        receiver: [
          { required: true, message: '请输入事由', trigger: 'blur' }
        ]
      },
      formLoading: false
    }
  },
  computed: {
    bigMoneyStr() {
      if (!this.cuForm.amount) {
        return '零元整'
      }
      return amountToBigStr(this.cuForm.amount)
    },
    userName() {
      return this.cuForm.real_name ? this.cuForm.real_name : this.$store.state.user.name
    },
    userId() {
      return this.$store.state.user.id
    }
  },
  created() {
    if (getToken()) {
      this.uploadHeaders['Authorization'] = getToken()
    }
    const params = this.$route.params
    console.log(params)
    this.viewName = this.$route.name
    if (params && params.is_created) {
      this.is_created = params.is_created
    }
    if (params && params.id) {
      this.getDetail(params.id)
    }
    if (params && params.payment_write_off_id) {
      this.getDetailByWriteOffId(params.payment_write_off_id)
      this.is_write_off_page = true
    }
    if (params && params.handle_param) {
      if (this.$route.name == 'personal_handler_write_off_apply') {
        this.getDetailByWriteOffId(params.handle_param.id)
        this.is_write_off_page = true
      } else {
        this.getDetail(params.handle_param.id)
      }
    }
  },
  methods: {
    save() {
      // const loading = this.$loading({
      //   lock: true,
      //   text: '提交中',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // })
      // if (this.is_write_off_page) {
      //   const data = { payment_id: this.cuForm.payment_id, attach_file: this.cuForm.attach_file }
      //   writeOffSave(data).then(
      //     res => {
      //       if (res.code == 200) {
      //         this.$message({
      //           message: res.message,
      //           type: 'success'
      //         })
      //         this.closeThisPage()
      //       } else {
      //         this.$message.error('操作失败')
      //       }
      //       loading.close()
      //     }
      //   ).catch(() => {
      //     loading.close()
      //   })
      // } else {
      //   save(this.cuForm).then(
      //     res => {
      //       if (res.code == 200) {
      //         this.$message({
      //           message: res.message,
      //           type: 'success'
      //         })
      //         this.closeThisPage()
      //       } else {
      //         this.$message.error('操作失败')
      //       }
      //       loading.close()
      //     }
      //   ).catch(() => {
      //     loading.close()
      //   })
      // }
    },
    submit() {
      // const loading = this.$loading({
      //   lock: true,
      //   text: '提交中',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // })
      // if (this.is_write_off_page) {
      //   const data = { payment_id: this.cuForm.payment_id, attach_file: this.cuForm.attach_file }
      //   writeOffSaveAndBegin(data).then(
      //     res => {
      //       if (res.code == 200) {
      //         this.$message({
      //           message: res.message,
      //           type: 'success'
      //         })
      //         this.closeThisPage()
      //       } else {
      //         this.$message.error('操作失败')
      //       }
      //       loading.close()
      //     }
      //   ).catch(() => {
      //     loading.close()
      //   })
      // } else {
      //   saveAndBegin(this.cuForm).then(
      //     res => {
      //       if (res.code == 200) {
      //         this.$message({
      //           message: res.message,
      //           type: 'success'
      //         })
      //         this.closeThisPage()
      //       } else {
      //         this.$message.error('操作失败')
      //       }
      //       loading.close()
      //     }
      //   ).catch(() => {
      //     loading.close()
      //   })
      // }
    },
    pass(option) {
      const loading = this.$loading({
        lock: true,
        text: '提交中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      if (this.is_write_off_page) {
        writeOffPass({
          id: this.cuForm.payment_write_off_id,
          wf_check_opinion: option
        }).then(
          res => {
            if (res.code == 200) {
              this.$message({
                message: res.message,
                type: 'success'
              })
              this.closeThisPage()
            } else {
              this.$message.error('操作失败')
            }
            loading.close()
          }
        ).catch(() => {
          loading.close()
        })
      } else {
        pass({
          id: this.cuForm.id,
          wf_check_opinion: option
        }).then(
          res => {
            if (res.code == 200) {
              this.$message({
                message: res.message,
                type: 'success'
              })
              this.closeThisPage()
            } else {
              this.$message.error('操作失败')
            }
            loading.close()
          }
        ).catch(() => {
          loading.close()
        })
      }
    },
    returnBack(option) {
      const loading = this.$loading({
        lock: true,
        text: '提交中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      if (this.is_write_off_page) {
        writeOffReturnBack({
          id: this.cuForm.payment_write_off_id,
          wf_check_opinion: option
        }).then(
          res => {
            if (res.code == 200) {
              this.$message({
                message: res.message,
                type: 'success'
              })
              this.closeThisPage()
            } else {
              this.$message.error('操作失败')
            }
            loading.close()
          }
        ).catch(() => {
          loading.close()
        })
      } else {
        returnBack({
          id: this.cuForm.id,
          wf_check_opinion: option
        }).then(
          res => {
            if (res.code == 200) {
              this.$message({
                message: res.message,
                type: 'success'
              })
              this.closeThisPage()
            } else {
              this.$message.error('操作失败')
            }
            loading.close()
          }
        ).catch(() => {
          loading.close()
        })
      }
    },
    remove() {
      const loading = this.$loading({
        lock: true,
        text: '提交中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      if (this.is_write_off_page) {
        writeOffDeleteData(this.cuForm.payment_write_off_id).then(
          res => {
            if (res.code == 200) {
              this.$message({
                message: res.message,
                type: 'success'
              })
              this.closeThisPage()
            } else {
              this.$message.error('操作失败')
            }
            loading.close()
          }
        ).catch(() => {
          loading.close()
        })
      } else {
        deleteData(this.cuForm.id).then(
          res => {
            if (res.code == 200) {
              this.$message({
                message: res.message,
                type: 'success'
              })
              this.closeThisPage()
            } else {
              this.$message.error('操作失败')
            }
            loading.close()
          }
        ).catch(() => {
          loading.close()
        })
      }
    },
    actualDelete() {
      const loading = this.$loading({
        lock: true,
        text: '提交中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      if (this.is_write_off_page) {
        writeOffActualDeleteData(this.cuForm.payment_write_off_id).then(
          res => {
            if (res.code == 200) {
              this.$message({
                message: res.message,
                type: 'success'
              })
              this.closeThisPage()
            } else {
              this.$message.error('操作失败')
            }
            loading.close()
          }
        ).catch(() => {
          loading.close()
        })
      } else {
        actualDeleteData(this.cuForm.id).then(
          res => {
            if (res.code == 200) {
              this.$message({
                message: res.message,
                type: 'success'
              })
              this.closeThisPage()
            } else {
              this.$message.error('操作失败')
            }
            loading.close()
          }
        ).catch(() => {
          loading.close()
        })
      }
    },
    getDetail(id) {
      this.formLoading = true
      getDetail({ id }).then(res => {
        this.formLoading = false
        this.cuForm = res.data
        if (this.cuForm.attach_file) {
          this.sheetList = [{ name: '冲抵附件', url: this.cuForm.attach_file }]
        }
      }).catch(
        () => {
          this.formLoading = false
        }
      )
    },
    getDetailByWriteOffId(id) {
      this.formLoading = true
      getWriteOffDetail({ id }).then(
        res => {
          this.formLoading = false
          this.cuForm = res.data
          if (this.cuForm.attach_file) {
            this.sheetList = [{ name: '冲抵附件', url: this.cuForm.attach_file }]
          }
        }
      ).catch(
        () => {
          this.formLoading = false
        }
      )
    },
    closeThisPage() {
      this.$store.dispatch('tagsView/closeCurPage')
    },
    beforeUpload() {
      this.formLoading = true
    },
    uploadError() {
      this.formLoading = false
    },
    uploadSuccess(response, file, fileList) {
      this.formLoading = false
      this.cuForm.apply_attach_file = response.data
    },
    downLoad() {
      window.open(this.cuForm.apply_attach_file, '_blank')
    },
    downloadSheet(file) {
      window.open(file.url)
    },
    handlePreview(file) {
      window.open(file.response.data)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    }
  },
  watch: {
    cuForm: {
      handler(newValue) {
        if (this.cuForm.amount) {
          this.cuForm.amount = newValue.amount.toString().replace(/[^\d.]/g, '')
        }
      },
      deep: true
    }
  }
}
</script>

<style scoped>
.mailTable {
  width: 60%;
  font-size: 14px;
  margin: 0 auto 10px auto;
  border-collapse: collapse;
}

.mailTable tr td {
  width: 400px;
  height: 60px;
  line-height: 35px;
  box-sizing: border-box;
  padding: 0 10px;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
}

.firstTr td {
  border-top: 1px solid #E6EAEE;
}

.firstTd {
  border-left: 1px solid #E6EAEE;
}

.mailTable tr td.column {
  text-align: center;
  /*border: 1px solid #8c939d;*/
}

.tip {
  color: red;
}

.header {
  padding-top: 20px;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  margin: 10px auto;
}

.title {
  width: 60%;
  padding-left: 10px;
  margin: 5px auto;
}

/deep/ .el-form-item {
  margin-bottom: 0;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background-color: white;
  color: black;
}

/deep/ .el-input.is-disabled .el-input__inner {
  background-color: white;
  color: black;
}
</style>
